<!-- 核对订单 -->
<template>
	<div class="page_wrap">
		<header>
			<div class="h_left">
				<i class="iconfont iconarrowLeft-fill" @click="$router.go(-1)"></i>
			</div>
			<div class="h_center"><span>核对订单</span></div>
			<div class="h_right">
				<i class="iconfont icongengduo" style="visibility: hidden;"></i>
			</div>
		</header>

		<div class="main">
			<div class="addr_box" @click="toPage('addr')">
				<div class="a_left">
					<p class="p1">张三 15877220656</p>
					<p class="p2">广东省，广州市，海珠区</p>
					<p class="p3">海珠区江海大道中</p>
				</div>
				<div class="a_right">
					<div class="icon"><i class="iconfont iconarrowRight-fill"></i></div>
				</div>
			</div>

			<div class="store_list">
				<ul>
					<li v-for="(x, indexX) in storeList">
						<div class="ra">
							<p class="store_name">
								<img src="../../assets/images/icon_store_normal.png" />
								<span>{{x.storeName}}</span>
							</p>
						</div>
						<div class="rb" v-for="(y,indexY) in x.goodsList">
							<div class="goods_box">
								<div class="g_left">
									<div class="pic">
										<img :src="y.imageSrc" alt="" />
									</div>
								</div>
								<div class="g_right">
									<div class="goods_name">
										<span>{{y.goodsName}}</span>
									</div>
									<div class="goods_price">￥{{y.goods_price}}</div>
								</div>
							</div>
							<div class="goods_specification">
								<span>{{y.goodsFullSpecs}}</span>
								<div class="goods_num_edit">
									<span>x{{y.buyNum}}</span>
								</div>
							</div>
						</div>
						<div class="rc">
							<section>
								<span>优惠券</span>
								<b>无</b>
							</section>
							<section>
								<span>运费</span>
								<b>包邮</b>
							</section>
							<section>
								<span>关税</span>
								<b>免税</b>
							</section>
						</div>
					</li>
				</ul>
			</div>

		</div>

		<footer>
			<div class="txt">
				<span>订单总价:</span>
				<b>￥{{verifyOrderMsg.totalPrice}}</b>
			</div>
			<div class="btn" @click="submitFN"><span>提交订单</span></div>
		</footer>

		<!--密码框-->
		<van-action-sheet v-model="showPwd" title="" @click-overlay="cancelFN">
			<div class="pwd_content_box">
				<div class="p_head">
					<span style="visibility: hidden;">cancel</span>
					<span>请输入支付密码</span>
					<i class="iconfont iconcross-fill" @click="cancelFN"></i>
				</div>
				<div class="input_box">
					<div class="box">
						<i class="iconfont iconyk_yuanquan_fill" v-if="verifyCodeArr[0]"></i>
					</div>
					<div class="box">
						<i class="iconfont iconyk_yuanquan_fill" v-if="verifyCodeArr[1]"></i>
					</div>
					<div class="box">
						<i class="iconfont iconyk_yuanquan_fill" v-if="verifyCodeArr[2]"></i>
					</div>
					<div class="box">
						<i class="iconfont iconyk_yuanquan_fill" v-if="verifyCodeArr[3]"></i>
					</div>
					<div class="box">
						<i class="iconfont iconyk_yuanquan_fill" v-if="verifyCodeArr[4]"></i>
					</div>
					<div class="box">
						<i class="iconfont iconyk_yuanquan_fill" v-if="verifyCodeArr[5]"></i>
					</div>
				</div>
				<div class="pwd_hint" v-if="pwd_err"><span>密码错误，请重新输入！</span></div>
				<div class="number_box">
					<ul>
						<li>
							<span @click="clickNum('1')">1</span>
							<span @click="clickNum('2')">2</span>
							<span @click="clickNum('3')">3</span>
						</li>
						<li>
							<span @click="clickNum('4')">4</span>
							<span @click="clickNum('5')">5</span>
							<span @click="clickNum('6')">6</span>
						</li>
						<li>
							<span @click="clickNum('7')">7</span>
							<span @click="clickNum('8')">8</span>
							<span @click="clickNum('9')">9</span>
						</li>
						<li>
							<span style="background: #F8F8F8;" @click="clickNum('none')"></span>
							<span @click="clickNum('0')">0</span>
							<span style="background: #F8F8F8;" @click="clickNum('clean')">清除</span>
						</li>
					</ul>
				</div>
			</div>
		</van-action-sheet>
	</div>
</template>

<script>
	import { Toast, ActionSheet } from 'vant';
	export default {
		data() {
			return {
				verifyOrderMsg: {},
				storeList: [],

				showPwd: false, //输入密码弹窗
				verifyCodeArr: [],
				forbid: false, //禁止操作

				pwd_err: false, //true表示支付密码错误
			};
		},
		watch: {},
		computed: {},
		components: {},
		activated() {},
		deactivated() {},
		created() {
			this.init();
		},
		mounted() {

		},
		methods: {
			init() {
				let msg = sessionStorage.getItem('verifyOrderMsg') || null;
				if(msg) {
					this.verifyOrderMsg = msg = JSON.parse(msg);
					this.storeList = msg.storeList;
				}
			},
			toPage(page) {
				if(page == 'addr') {
					this.$router.push({
						name: 'addr'
					});
				}
			},
			submitFN() {
				this.showPwd = true;
			},
			cancelFN() {
				this.showPwd = false;
				this.pwd_err = false;
			},
			clickNum(val) {
				if(this.forbid) return;

				this.pwd_err = false;

				if(val == 'none') {

				} else if(val == 'clean') {
					this.verifyCodeArr = [];
				} else {
					this.verifyCodeArr.push(val);
					if(this.verifyCodeArr.length > 5) {
						this.toPay();
					}
				}
			},
			toPay() {
				this.forbid = true;
				setTimeout(() => this.forbid = false, 2000);

				Toast.loading({
					duration: 1000,
					message: "支付中...",
					forbidClick: true,
				});

				setTimeout(() => {
					if('' + this.verifyCodeArr.join('') == '123456') {
						this.cancelFN();
						this.$router.replace({
							name: 'paySuccess'
						});
					} else {
						this.pwd_err = true;
					}
					this.verifyCodeArr = [];
				}, 1000);
			},
		}
	}
</script>

<style lang='scss' scoped>
	@import '~@/assets/css/mixin';
	.page_wrap {
		width: 100%;
		height: 100%;
		background: $bgc;
	}
	
	.main {
		padding: rem(90) 0 0 0;
		.addr_box {
			padding: rem(20);
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: url(../../assets/images/disruptive_pattern.png) no-repeat bottom;
			background-size: 100% rem(10);
			.a_left {
				p {
					font-size: rem(28);
					color: $fc;
					line-height: rem(42);
				}
				.p1 {}
				.p2 {
					color: #999;
				}
				.p3 {
					color: #999;
				}
			}
			.a_right {
				i {
					font-size: rem(46);
					color: $fc;
				}
			}
		}
	}
	
	//store_list
	.store_list {
		padding: 0 0 rem(200) 0;
		ul {}
		li {
			background: #fff;
			margin: 0 0 rem(20) 0;
			.check_icon {
				width: rem(40);
				height: rem(40);
				margin: 0 rem(10) 0 0;
				display: flex;
				justify-content: center;
				align-items: center;
				img {
					width: 100%;
				}
			}
		}
		.ra {
			height: rem(100);
			padding: rem(10) rem(20);
			box-sizing: border-box;
			border-bottom: rem(1) solid #eee;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			.store_name {
				display: flex;
				align-items: center;
				img {
					width: rem(32);
				}
				span {
					margin: 0 0 0 rem(10);
					font-size: rem(28);
					color: $fc;
					font-weight: bold;
				}
			}
		}
		.rb {
			border-bottom: rem(1) solid #eee;
			padding: rem(20);
			position: relative;
			.goods_box {
				display: flex;
				justify-content: space-between;
				box-sizing: border-box;
				.g_left {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					.pic {
						width: rem(140);
						height: rem(140);
						overflow: hidden;
						display: flex;
						justify-content: center;
						align-items: center;
						background: #eee;
						img {
							width: 100%;
						}
					}
				}
				.g_right {
					flex: 1;
					margin: 0 0 0 rem(10);
					.goods_name {
						span {
							font-size: rem(28);
							line-height: rem(46);
							height: rem(92);
							color: $fc;
							overflow: hidden;
							-webkit-line-clamp: 2;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							word-break: break-all; //强制换行
						}
					}
					.goods_price {
						font-size: rem(32);
						color: $theme-red;
						font-weight: bold;
					}
				}
			}
			.goods_specification {
				margin: rem(10) 0 0 0;
				display: flex;
				justify-content: space-between;
				align-items: center;
				span {
					font-size: rem(24);
					color: #999;
				}
				.goods_num_edit {
					display: flex;
					justify-content: flex-end;
					align-items: center;
					span {
						font-size: rem(28);
						color: $theme-color;
					}
				}
			}
		}
		.rc {
			box-sizing: border-box;
			padding: rem(10) rem(20);
			border-bottom: rem(1) solid #eee;
			section {
				height: rem(50);
				display: flex;
				justify-content: space-between;
				align-items: center;
				span {
					font-size: rem(28);
					color: #999;
				}
				b {
					font-size: rem(28);
					color: #999;
				}
			}
		}
		.rd {}
	}
	
	//footer
	footer {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 1;
		background: #fff;
		padding: rem(20);
		.txt {
			display: flex;
			justify-content: space-between;
			align-items: center;
			span {
				font-size: rem(30);
				color: $fc;
				line-height: rem(60);
			}
			b {
				font-size: rem(30);
				color: $fc;
				line-height: rem(60);
			}
		}
		.btn {
			height: rem(80);
			background: $theme-color;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: rem(50);
			span {
				font-size: rem(28);
				color: #fff;
			}
		}
	}
	
	//密码框
	.pwd_content_box {
		.p_head {
			height: rem(80);
			padding: 0 rem(20);
			display: flex;
			justify-content: space-between;
			align-items: center;
			span {
				font-size: rem(32);
				color: $fc;
			}
			i {
				font-size: rem(36);
				color: $fc;
			}
		}
		.input_box {
			position: relative;
			display: flex;
			justify-content: center;
			margin: rem(20) 0;
			.box {
				height: rem(90);
				width: rem(90);
				border: rem(2) solid #999;
				border-radius: rem(8);
				margin: rem(0) rem(5);
				display: flex;
				justify-content: center;
				align-items: center;
				i {
					font-size: rem(26);
					color: $fc;
				}
			}
		}
		.pwd_hint {
			display: flex;
			justify-content: center;
			align-items: center;
			span {
				font-size: rem(26);
				color: $theme-red;
			}
		}
		.number_box {
			margin: rem(20) 0 0 0;
			box-sizing: border-box;
			border-top: rem(1) solid #eee;
			border-left: rem(1) solid #eee;
			ul {
				li {
					display: flex;
					justify-content: space-between;
					span {
						&:active {
							opacity: 0.5;
						}
						flex: 1;
						height: rem(110);
						line-height: rem(110);
						text-align: center;
						border-right: rem(1) solid #eee;
						border-bottom: rem(1) solid #eee;
						box-sizing: border-box;
						color: $fc;
						font-size: rem(40);
					}
				}
			}
		}
	}
</style>